<template>
  <div id="head">
    <div id="ahead">
      <div id="shead">
        <ul>
          <img src="../assets/logo1.png" />
          <li>
            <router-link to="/index/indexdown">
              <a>首页</a>
            </router-link>
          </li>
          <li>
            <router-link to="/index/person/pmyo">
              <a>个人中心</a>
            </router-link>
          </li>
          <li>
            <router-link to="/index/menu">
              <a>查看菜单</a>
            </router-link>
          </li>
          <li>
            <router-link to="/index/menu">
              <a>故事</a>
            </router-link>
          </li>
          <li>
            <router-link to="/Index/Discount">
              <a>优惠活动</a>
            </router-link>
          </li>
          <li>
            <router-link to="/index/menu">
              <a>新闻资讯</a>
            </router-link>
          </li>
          <li>
            <router-link to="/index/menu">
              <a>联系我们</a>
            </router-link>
          </li>
          <li>
            <router-link to="/index/mapp">
              <a>地图</a>
            </router-link>
          </li>
          <li> </li> 
          <li v-if="token=='y'">欢迎{{tel}}</li>
            <li v-else>
            <router-link to="/login"><a>登录</a></router-link>/<router-link to="/register"><a>注册</a></router-link>
            </li>
         
            <router-link to="/index/cart" id="img1">
              <a >
                <img src="../assets/mycar.png" />
              </a>
            </router-link>
        
        </ul>
      </div>
    </div>
    <router-view></router-view>
   <div id="footer">
      <div id="container">
        <ul>
          <li>
            <h3>联系我们</h3>
          </li>
          <li>客户服务</li>
          <li>400-028-8888</li>
          <li>Email：163@163.com</li>
          <li></li>
          <li>商务合作</li>
          <li>QQ：11111111111</li>
          <li>Email：163@163.com</li>
        </ul>
        <ul>
          <li>
            <h3>帮助中心</h3>
          </li>
          <!-- <li>
            <a href>房源审核规范</a>
          </li>
          <li>
            <a href>房客安心计划</a>
          </li>
          <li>
            <a href>优质住宿计划</a>
          </li> -->
          <li>
            <a href>网站地图</a>
          </li>
          <li>
            <a href>客服帮助</a>
          </li>
        </ul>
        <ul>
          <li>
            <h3>公司信息</h3>
          </li>
          <li>
            <a href="#">加入我们</a>
          </li>
          <li>
            <a href="#">战略合作</a>
          </li>
          <li>
            <a href="#">媒休报道</a>
          </li>
          <li>
            <a href="#">服务协议</a>
          </li>
          <li>
            <a href="#">隐私政策</a>
          </li>
          <li>
            <a href="#">免责声明</a>
          </li>
        </ul>
        <ul>
          <li>
            <h3>下载APP</h3>
          </li>
          <li>
            <!-- <img src="images/ma.png" alt /> -->
          </li>
          <li>
            <a href>
              <button>Android下载</button>
            </a>
          </li>
          <li>
            <a href>
              <button>iOS下载</button>
            </a>
          </li>
        </ul>
        <ul>
          <li>
            <h3>关注我们</h3>
          </li>
          <li>
            <!-- <img src="images/sina.png" alt /> -->
          </li>
          <li>
            <!-- <img src="images/wx.png" alt /> -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import jwt_decode from "jwt-decode";
export default {
  data(){
    return{
      token:"",
      tel:"",
    }
  },
  created(){
    let tokenIsExists = localStorage.getItem("mytoken");
    let tel = jwt_decode(localStorage.getItem("mytoken")).userTel;
    this.tel = tel;
    if(tokenIsExists != null){
      this.token = "y";
    }
  }
}
</script>
<style lang="css" scoped>
#head {
  height: 80px;
  width: 100%;
  margin-top: 1px;
  background-color: #fff;
}
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
#ahead {
  width: 100%;
  height: 80px;
  position: relative;
  z-index: 10;
}
@media (max-width: 1200px) {
  #ahead {
    width: 1200px;
  }
}
#shead ul {
  width: 1300px;
  height: 80px;
}
#shead {
  width: 100%;
  height: 80px;
  background-color: #fff;
  box-shadow: rgba(129, 123, 123) 0px 0px 10px 0px;
}
#shead ul li {
  float: left;
  width: 110px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
#shead ul img {
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 50px;
  margin-top: 15px;
}
a {
  font-size: 15px;
  color: rgb(119, 92, 17);
}
a:hover {
  color: rgba(77, 63, 25, 0.6);
}
#img1 a img{
  width: 25px;
  height: 25px;
  margin-top: 25px;
  margin-left: 50px;
}
#footer {
  width: 100%;
  height: 300px;
  /* margin-top: 30px; */
  overflow: hidden;
  background-color: #322c27;
}

#container {
  width: 1000px;
  height: 300px;
  margin: 0 auto;
}

#container ul {
  color: #fff;
  width: 150px;
  height: 300px;
  float: left;
  margin-left: 40px;
}

#container ul li {
  margin-top: 10px;
}

#container ul li a {
  color: #fff;
}

#container ul li img {
  width: 100px;
  height: 100px;
}

h2 {
  text-shadow: 1px 2px black 10;
}
@media (max-width: 1200px) {
  #footer {
    width: 1200px;
    /* background-color: #ff0; */
  }
  
}
</style>